<template>
  <div class="personal">
    <div class="center-content">
      <div class="left_mes">
        <div class="user_avatar">
          <img :src="userInfo.user.userHead || 'https://attachment-center.boxuegu.com/data/attachment/univ/defalut_avartar/student.jpg'" alt=""/>
        </div>
        <ul class="mes-tab">
          <router-link to="/personalDetail" active-class="active" class="clearfix">
            <div class="icon_box">
              <img src="" alt=""/>
            </div>
            <p>个人资料</p>
          </router-link>
          <!--
          <router-link
            to="/personalCenter/myClasses"
            tag="li"
            active-class="active"
            class="clearfix"
          >
            <div class="icon_box">
              <img
                src="https://stu.ityxb.com/img/icon_jiankangketang.8cf6a5b7.png"
                alt=""
              />
            </div>
            <p>我的课程</p>
          </router-link> -->
          <router-link to="/PersonalQuestion" active-class="active" class="clearfix">
            <div class="icon_box">
              <img src="" alt=""/>
            </div>
            <p>我的问答</p>
          </router-link>
        </ul>
      </div>
      <div class="right_view clearfix">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
    };
  },
  computed: {
    ...mapState({ userInfo: (state) => state.user }),
  },
};
</script>

<style lang="scss" scoped>
.personal {
  width: 100%;
  background-color: #f5f7fa;
  overflow: hidden;
  padding-bottom: 80px;
  img {
    width: 100%;
    height: 100%;
  }

  .center-content {
    height: 100%;
    min-height: 800px;
    padding-top: 20px;
    .left_mes {
      float: left;
      min-height: 759px;
      width: 185px;
      height: 100%;
      background: #ebeef5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 53px 22px;
      text-align: center;
      .user_avatar {
        display: inline-block;
        width: 80px;
        height: 80px;
        overflow: hidden;
        border-radius: 80px;
        position: relative;
        text-align: center;
      }
      .mes-tab {
        margin-top: 22px;
        li {
          margin-bottom: 20px;
          color: #303133;
          cursor: pointer;
          .icon_box {
            float: left;
            width: 36px;
            height: 36px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
          }
          p {
            float: left;
            margin-left: 10px;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
          }
          &.active {
            color: $theme-color-font;
          }
        }
      }
    }
    .right_view {
      position: relative;
      width: 1015px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      float: right;
      min-height: 759px;
      height: 100%;
      background: #fff;
    }
  }
}
.el-input {
  width: 300px;
}
.el-cascader {
  width: 230px;
}
.el-form-item {
  margin-left: 20px;
}
</style>